<script>
export default {
  name: "Index",
  data(){
    return{
      charts1: {
        title: {
          text: '出勤率',
          style: {
            fill: 'black'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [ { name: 'itemA', value: 80 } ],
            center: ['50%', '55%'],
            axisLabel: {
              formatter: '{value}%',
              style: {
                fill: '#fff'
              }
            },
            axisTick: {
              style: {
                stroke: '#fff'
              }
            },
            animationCurve: 'easeInOutBack'
          }
        ]
      },
      charts2:{
        data: [
          {
            name: '大数据',
            value: 55
          },
          {
            name: '软件',
            value: 120
          },
          {
            name: '英语',
            value: 78
          },
          {
            name: '数学',
            value: 66
          },
          {
            name: '自媒体',
            value: 80
          }
        ],
        lineWidth: 10
      },
      charts3: {
        data: [
          {
            name: '大数据',
            value: 550
          },
          {
            name: '软件',
            value: 1200
          },
          {
            name: '英语',
            value: 780
          },
          {
            name: '数学',
            value: 660
          },
          {
            name: '自媒体',
            value: 800
          }
        ],
        unit: '人'
      },
      charts4:{
        title: {
          text: '年入学人数趋势'
        },
        xAxis: {
          name: '年份',
          data: ['2020', '2021', '2022', '2023', '2024', '2025']
        },
        yAxis: {
          name: '人数',
          data: 'value'
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200],
            type: 'line'   // 折线图
          }
        ]
      },
      charts5:{
        title: {
          text: '年入学人数'
        },
        xAxis: {
          name: '年份',
          data: ['2020', '2021', '2022', '2023', '2024', '2025']
        },
        yAxis: {
          name: '人数',
          data: 'value'
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200],
            type: 'bar',   // 折线图
            gradient: {
              color: ['#37a2da', '#67e0e3']
            }
          }
        ]
      },
      charts6: {
        header: ['学号', '姓名', '科目','成绩'],
        data: [
          ['20250925001', 'student1', 'Java',90],
          ['20250925002', 'student2', 'Java',90],
          ['20250925003', 'student3', 'Java',90],
          ['20250925004', 'student4', 'Java',90],
          ['20250925005', 'student5', 'Java',90],
          ['20250925006', 'student6', 'Java',90],
          ['20250925007', 'student7', 'Java',90],
          ['20250925008', 'student8', 'Java',90],
        ],
        index: true,
        oddRowBGC:'',
        evenRowBGC:'',
        headerBGC:''
      }
    }
  }
}
</script>

<template>
  <dv-full-screen-container>
    <div id="container">
      <div>
        <h2>马鞍山学院学生信息看板</h2>
        <dv-decoration-5 style="width:1300px;height:30px;margin: 0 auto" dur="5"/>
      </div>
      <div id="box1">
        <div>
          <dv-border-box-12>
            <dv-charts :option="charts1" />
          </dv-border-box-12>
        </div>
        <div>
          <dv-border-box-12>
            <dv-active-ring-chart :config="charts2" style="width:300px;height:300px;margin: 0 auto" />
          </dv-border-box-12>
        </div>
        <div>
          <dv-border-box-12>
            <dv-capsule-chart :config="charts3" style="width:350px;height:260px;margin: 0 auto;box-sizing: border-box;padding-top: 80px" />
          </dv-border-box-12>
        </div>
      </div>
      <div id="box2">
        <div>
          <dv-border-box-12>
            <dv-charts :option="charts4" />
          </dv-border-box-12>
        </div>
        <div>
          <dv-border-box-12>
            <dv-charts :option="charts5" />
          </dv-border-box-12>
        </div>
        <div>
          <dv-border-box-12>
            <dv-scroll-board :config="charts6" style="width:450px;height:220px;margin: 0 auto;box-sizing: border-box;padding-top:22px" />
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style scoped>
#container {
  height: 100vh;
  background-color: darkseagreen;
  display: flex;
  flex-direction: column;
}

#box1, #box2 {
  flex: 1;
  display: flex;
}
#box1{
  div{
    flex: 1;
  }
}

#box2{
  div{
    flex: 1;
  }
}


</style>